<template>
  <div class="main">
    <!-- vant搜索 -->
    <search />

    <!-- 分类模块 -->
    <van-tabs v-model="active" swipeable sticky>
      <van-tab
        v-for="(item, index) in category"
        :title="item.name"
        :key="index"
      >
        <!-- 分类下内容 -->
        <div class="detailparent">
          <detail
            class="detailitem"
            :detailitem="categoryitem"
            v-for="(categoryitem, categoryindex) in item.list.slice(0, -1)"
            :key="categoryindex"
          />
        </div>
        <div class="myBox"></div>
      </van-tab>
    </van-tabs>
    <!-- </template> -->
    <!-- <search-result /> -->
  </div>
</template>

<script>
import Search from "@/components/Search.vue";
import Detail from "./Detail.vue";
import searchResult from "./searchResult.vue";
export default {
  data() {
    return {
      category: [],
      value: "",
      active: 0,
    };
  },
  components: {
    Detail,
    searchResult,
    Search,
  },
  methods: {
    async getCategory() {
      const url = "http://10.36.4.254:8080/select/category";
      this.axios.get(url).then((res) => {
        // console.log(res.data);
        // this.category = res.data;
        this.changeCategory(res.data.categories);
      });
    },
    changeCategory(data) {
      const category1 = data.map((item, index) => {
        item.list = [];
        item.page = 0;
        item.pagesize = 10;
        return item;
      });
      this.category = category1;
      this.selectArticle();
    },
    async selectArticle() {
      const categoryitem = this.categoryItem();
      const res = await this.$http.get(
        "http://10.36.4.254:8080/select/FilmType?type=" + categoryitem.name,
        {
          params: {
            page: categoryitem.page,
            pagesize: categoryitem.pagesize,
          },
        }
      );
      // console.log(res.data);

      categoryitem.list = res.data;
    },
    categoryItem() {
      const categoryitem = this.category[this.active];
      // console.log(categoryitem);
      return categoryitem;
    },
    // onSearch(){
    //     console.log(this.value)
    //   //   if(this.$router.params.value != this.value){
    //   // this.$router.push("/searchResult/"+this.value);
    //   // }
    //     this.$router.push('/searchResult/'+ this.value)
    // }
  },
  watch: {
    active() {
      // this.categoryItem();
      this.selectArticle();
    },
  },
  created() {
    this.getCategory();
  },
};
</script>

<style lang="scss" scoped>
.van-tabs__content {
  widows: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  z-index: 999;
  background-color: #d2eddb;
}
.myBox{
  height: 3rem;
}
</style>
